<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>键盘事件的处理</title>
</head>
<body>
<div id="change" class="change">
    <!--问题1：要不要使用 表单-->
    <!--问题2： input 输入框如何来使用？-->

    <!--标签用来指定其内部内容为表单，——需要提交到服务器-->
    <!--默认行为：使用 submit 按钮或者按下回车键会将内容提交-->
    <form action="">

        <label for="content">请输入内容
            <input type="text" name="content" id="content">
        </label>
    </form>
</div>

<script>
    let element = document.querySelector("#content");

    element.addEventListener("keypress", function (event) {
        // console.log(event);
        if (event.key === "Enter") {
            // 阻止按键的默认行为。
            // 否则页面会刷新，——提交表单内容。
            event.preventDefault()

            console.log(element.value);
        }

    })
</script>
</body>
</html>